<template>
	<view class="zai-box">
		<image src="/static/img/login/login.png" mode="aspectFit" class="zai-logo"></image>
		<view class="zai-title">openThree</view>
		<view class="zai-form">
			<input class="zai-input"  placeholder="请输入手机号" focus v-model="user.userMobile" />
			<input class="zai-input"  password placeholder="请输入密码" v-model="user.userPass" />
			<navigator url="./retrieve" hover-class="none" class="zai-label">忘记密码？</navigator>
			<button class="zai-btn" @tap="bindLogin" v-no-more-click :disabled="$store.state.disabled">立即登录</button>
			<navigator url="./register" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	computed: mapState(['hasLogin', 'userInfo']),
	data() {
		return {
			user: {},
			rule: [
				{
					name: 'userMobile',
					checkType: 'phoneno',
					checkRule: '',
					errorMsg: '请填写正确的手机号'
				},
				{
					name: 'userPass',
					checkType: 'string',
					checkRule: '6,32',
					errorMsg: '密码应为6-32个字符'
				}
			]
		};
	},
	methods: {
		...mapMutations(['login']),
		async bindLogin() {
			if (!this.dataCheck.check(this.user, this.rule)) {
				uni.showToast({
					title: this.dataCheck.error,
					icon: 'none'
				});
				return;
			}
			this.login(this.user);
		}
	}
};
</script>

<style>
.zai-box {
	padding: 0 100upx;
	position: relative;
}
.zai-logo {
	width: 100%;
	width: 100%;
	height: 310upx;
}
.zai-title {
	position: absolute;
	top: 0;
	line-height: 360upx;
	font-size: 68upx;
	color: #fff;
	text-align: center;
	width: 100%;
	margin-left: -100upx;
}
.zai-form {
	margin-top: 300upx;
}
.zai-input {
	background: #e2f5fc;
	margin-top: 30upx;
	border-radius: 100upx;
	padding: 5upx 40upx;
	font-size: 36upx;
}
.input-placeholder,
.zai-input {
	color: #94afce;
}
.zai-label {
	padding: 60upx 0;
	text-align: center;
	font-size: 30upx;
	color: #a7b6d0;
}
.zai-btn {
	background: #ff65a3;
	color: #fff;
	border: 0;
	border-radius: 100upx;
	font-size: 36upx;
}
.zai-btn:after {
	border: 0;
}
/*按钮点击效果*/
.zai-btn.button-hover {
	transform: translate(1upx, 1upx);
}
</style>
